<template>
    <div id="information" class="all">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item>首页</el-breadcrumb-item>
            <el-breadcrumb-item>个人中心 </el-breadcrumb-item>
            <el-breadcrumb-item>个人资料</el-breadcrumb-item> </el-breadcrumb><br />

        <!-- <i class="iconfont icon-r-paper" style="font-size: 32px"><b style="font-size: 28px">个人信息</b></i> -->
        

        <div class="table-container" style="padding: 20px;margin: 10px;">
            <i class="el-icon-user" style="padding-right: 15px;"></i>
            <span style="margin-right: 89%; font-size: 18px;"><b>个人信息</b></span>
            <el-divider class="custom-divider"></el-divider>
            <el-form :model="userform" ref="form">
                <el-form-item label="雇员编号" :label-width="formLabelWidth" style="margin: 20px;">
                    <el-input v-model="userform[0].empId" autocomplete="off" :readonly="true" :display="true"></el-input>
                </el-form-item>
                <el-form-item label="账号" :label-width="formLabelWidth" style="margin: 20px;">
                    <el-input v-model="userform[0].empAccount" autocomplete="off" :readonly="true" :display="true"></el-input>
                </el-form-item>
                <el-form-item label="姓名" :label-width="formLabelWidth" style="margin: 20px;">
                    <el-input v-model="userform[0].name" autocomplete="off" :readonly="true" :display="true"></el-input>
                </el-form-item>
                <el-form-item label="联系方式" :label-width="formLabelWidth" style="margin: 20px;">
                    <el-input v-model="userform[0].phone" autocomplete="off" :readonly="true" :display="true"></el-input>
                </el-form-item>
                <el-form-item label="职位" :label-width="formLabelWidth" style="margin: 20px;">
                    <el-input v-model="userform[0].position" autocomplete="off" :readonly="true" :display="true"></el-input>
                </el-form-item>
                <el-form-item label="入职时间" :label-width="formLabelWidth" style="margin: 20px;">
                    <el-input v-model="userform[0].createTime" autocomplete="off" :readonly="true" :display="true"></el-input>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import axios from 'axios';
export default {
    data() {
        return {
            empId: "",
            cusId: "",
            username: "",
            password: "",
        
            userform: {
                // empId: "1",
                // name: "hk",
                // empAccount: "huiyi",
                // empPwd: "123456",
                // phone: "17762392147",
                // position: "0",
                // createTime: "2024-01-04",
            },
            formLabelWidth: '90px'
        };
    },

    methods: {
        getPositionText(position) {
            switch (position) {
                case 1:
                    return "经理";
                case 2:
                    return "收银员";
                case 3:
                    return "理货员";
                default:
                    return "未知职务";
            }
        },
        initpos() {
            this.userform[0].position = this.getPositionText(this.userform[0].position);
        },
        checkid() {
        if (this.empId == "" || this.empId == null)
          this.$router.push('/login');
      },
        getMaindata() {
            let url = "http://localhost:8080/employee";
            axios.get(url, { params:{empId:this.empId}})
                .then((response) => {
                    console.log(response.data);
                    this.userform = response.data.data.rows;
                    this.initpos();
                })
                .catch((error) => {
                    console.error('Error in getMaindata request', error);
                });
        },
        init() {
            this.empId = localStorage.getItem('empId');
            this.cusId = localStorage.getItem('cusId');
            this.username = localStorage.getItem('username') || "";
            this.password = localStorage.getItem('password') || "";
        },
    },

    mounted() {
        this.init();
        this.checkid();
        this.getMaindata();
        
    },
};
</script>


<style>
.all {
    line-height: 30px;
}

.table-container {
    box-shadow: 0 0 4px 1px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .12);
}

.custom-divider {
    margin: 4px 0;
    /* 调整 el-divider 的间距 */
}

.custom-descriptions {
    padding-left: 10px;
    margin-bottom: 0;
}
</style>